<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" :name="`${address.name} ${address.region_text}`" :tel="address.tel" v-if="address" @click="AddressSelect" />
  <van-contact-card type="add" v-else @click="AddressAdd" />

  <!-- 商品卡片 -->
  <van-card
    v-if="product"
    :title="product.name"
    :thumb="product.thumbs_text"
    @click-thumb="toProductInfo(item.id)"
  >
    <template #title>
      <div class="title">{{ product.name }}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="attribute.length > 0">
      <van-tag v-for="(attr,index) in attribute" :key="index" class="tag" type="primary">{{ attr.value }} {{ attr.price > 0 ? `￥${attr.price}` : ''}}</van-tag>
    </template>

    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">拼团价格：￥{{ product.team }}</div>
    </template>
  </van-card>

  <van-cell title="支付方式" :value="PayActive.text" is-link @click="PayShow = true" />

  <!-- 订单备注 -->
  <van-field
    v-model="remark"
    rows="2"
    autosize
    label="订单备注"
    type="textarea"
    maxlength="120"
    placeholder="请输入订单备注"
    show-word-limit
  />

  <!-- 提交动作栏 -->
  <van-submit-bar text-align="left" :price="total" button-text="确认支付" @submit="submit" />

  <!-- 支付方式的选择器 -->
  <van-popup v-model:show="PayShow" position="bottom">
    <van-picker
      title="选择支付方式"
      :columns="PayList"
      @cancel="PayShow = false"
      @confirm="PayConfirm"
    />

  </van-popup>

</template>

<script setup>
  const { proxy } = getCurrentInstance()

  // 获取商品id 和选择的规格
  let proid = proxy.$route.query.proid ? proxy.$route.query.proid : 0
  let relationids = proxy.$cookies.get('relationids') ? proxy.$cookies.get('relationids') : ''
  let teamid = proxy.$cookies.get('teamid') ? proxy.$cookies.get('teamid') : 0

  // 响应式数据
  let product = ref(null)
  let address = ref(null)
  let remark = ref('')
  let attribute = ref([])

  // 支付方式
  let PayShow = ref(false)
  let PayActive = ref({ text: '余额支付', value: 'money' },)
  let PayList = ref([
    { text: '余额支付', value: 'money' },
    { text: '微信支付', value: 'wx' },
    { text: '支付宝', value: 'zfb' },
  ])

  // 生命周期
  onBeforeMount(() => {
    ProInfo()
    AttrInfo()
    AddressInfo()
  })

  // 合计的价格
  let total = computed(() => {
    var team = 0

    if (product.value) {
      team = product.value.team ? parseFloat(product.value.team) : 0
    }

    if (attribute.value.length > 0)
    {
      attribute.value.map((item) => {team += parseFloat(item.price)})
    }

    return parseFloat(team*100)
  })

  // 商品数据
  const ProInfo = async () => {
    // 组装数据
    var params = {
      busid: proxy.$business.value.id,
      proid
    }

    var result = await proxy.$POST({
      url: '/product/info',
      params
    })

    if (result.code == 0) {
      proxy.$fail(result.msg)
      return false
    }

    product.value = result.data.product
  }

  // 商品的规格数据
  const AttrInfo = async () => {
    // 判断是否有规格的数据ID
    if (!relationids) return false

    var result = await proxy.$POST({
      url: '/product/attribute',
      params: {relationids}
    })

    if (result.code == 0) return false

    attribute.value = result.data
  }

  // 返回默认地址
  const AddressInfo = async () =>{

    // 先判断cookie当中是否存在缓存,如果有缓存就拿缓存，没有缓存就接口请求
    var cached = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : null

    if (cached) {
      address.value = cached
    } else {
      var result = await proxy.$POST({
        url: '/address/selected',
        params:{busid:proxy.$business.value.id}
      })

      if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
      }

      address.value = result.data
    }
  }

  // 切换收货地址
  const AddressSelect = () => {
    proxy.$router.push({ path: '/address/index', query: { action: 'select' } })

  }

  // 添加收货地址
  const AddressAdd = () => {
    proxy.$router.push('/address/add')
  }

  //跳转到商品详情界面
  const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })

  // 选择支付方式
  const PayConfirm = ({selectedOptions}) =>{
    PayShow.value = false
    PayActive.value = selectedOptions[0]
  }

  // 提交订单
  const submit = async () =>{
    //组装数据
    var params = {
      busid: proxy.$business.value.id,
      addrid: address.value.id,
      relationids: relationids,
      remark: remark.value,
      pay: PayActive.value.value,
      teamid: teamid,
      proid: proid
    }

    var result = await proxy.$POST({
      url: '/team/add',
      params
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    proxy.$success({
      message: result.msg,
      onClose: () =>
      {
        // proxy.$router.push(result.url)
        proxy.$router.push('/business/index')
        return false
      }
    })
  }

</script>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }
</style>
